<script setup lang="ts">
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { has, get } from "lodash";
const store = useStore();
const $router = useRouter();
// 微前端改造
if (window.__POWERED_BY_WUJIE__) {
  // 注入实例，实现手动调用子应用的方法
  window.$vue = { $store: store, $router };
  // 手动跳转的方法挂载 这里提醒一点不能直接返回 $router.push
  // 这里不使用自动跳转的逻辑，也就是同一个子应用，著应用菜单变化，子应用 url 不变，采用手动跳转的方式
  // 自动跳转我遇到了 bug ,跳转路径总是不变，即使 url 变了！
  window.$jump = (data: any) => {
    $router.push(data);
  };
  // 免登录方法挂载 这里免登录的内部实现需要依据实际情况去实现
  window.$noLogin = (token: string) => {
    store.dispatch("noLogin", token);
  }; // 自动注入 token 实现免登录
  const p = window.$wujie.props;
  if (has(p, "token")) {
    store.dispatch("noLogin", get(p, "token"));
  }
  // 自动注入 数据到 vuex 中
  if(has(p,"store")){
    const d = get(p,"store")
    if(typeof d === 'object'){
      Object.keys(d).forEach(k => {
        store.commit(k,get(d,k))
      })
    }
  }
  // 这里是把主应用里面的 jump 函数挂载到window 对象上，方便子应用调用。
  // 如果子应用不需要调用，可以去掉
  if (has(p, "jump") && typeof get(p, "jump") === "function") {
    window.$jumpto = (name: any, data?: any) => get(p, "jump")(name, data);
  }
}
</script>

<template>
  <router-view />
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
/* 解决用户代理样式表样式问题 */
:focus {
  outline: none;
}
.el-popper {
  max-width: 75%;
}
</style>
